<template>
    <div>
        <div class="title">1.chunk，将数组进行切分。</div>
        <div>[1,2,3,4,5,6,7,8,9].chunk(arr,2):{{ lodash.chunk([1,2,3,4,5,6,7,8,9],2) }}</div>
        <div class="title">2.compact，去除假值。（将所有的空值，0，NaN过滤掉）</div>
        <div>lodash.compact(['1','2',' ',0]): {{ lodash.compact(['1','2',' ',0]) }}</div>
        <div class="title">3.filter和reject，过滤集合，传入匿名函数。（二者放在一起讨论的原因是，两个函数类似但返回的值是相反。）</div>
        <div>_.filter([1,2],x => x = 1): {{ lodash.filter([1, 2], x => x == 1) }}</div>
        <div>_.reject([1,2],x => x=1): {{ _.reject([1,2],x => x == 1) }}</div>
        <div class="title">4.map和forEach，数组遍历。（相似）</div>
        <div>_.map([1,2],x => x+1): {{ _.map([1,2],x => x+1) }}</div>
        <div>_.forEach([1,2],x => x+1): {{ _.forEach([1,2],x => x+1) }}</div>
        <div class="title">5.merge,参数合并。（区别于assign：assign 函数不会处理原型链上的属性，也不会合并相同的属性，而是用后面的属性值覆盖前面的属性值
            merge 遇到相同属性名的时候，如果属性值是纯对象或集合的时候，会合并属性值）</div>
        <div>_.assign({},{a:1},{b:{a:1,b:2}},{b:{a:3}})： {{ lodash.assign({a:4,b:4,c:4,d:5},{a:1,c:2},{a:2,b:3}) }}</div>
        <div>_.merge({},{a:1},{b:{a:1,b:2}},{b:{a:3}}): {{ lodash.merge({},{a:1,c:2},{a:2,b:3}) }}</div>
        <div class="title">6.sumby,sortby,orderBy，数组对象求和、排序（区别：sortby升序排序，orderBy指定为"desc" 降序，或者指定为 "asc" 升序，默认升序)</div>
        <div>var arrs = [{ 'n': 4 }, { 'n': 2 }, { 'n': 8 }, { 'n': 6 }];</div>
        <div>_.sumBy(arrs, k => k.n): {{ lodash.sumBy(arrs, k => k['n']) }}</div>
        <div>_.sumBy(arrs,'n'): {{ _.sumBy(arrs,'n') }}</div>
        <div>
            var users = [
                { 'user': 'barney', 'age': 36, 'active': true },
                { 'user': 'fred',   'age': 40, 'active': false },
                { 'user': 'anty',   'age': 18, 'active': false },
                { 'user': 'city',   'age': 18, 'active': false },
                { 'user': 'city',   'age': 20, 'active': false }
            ];
        </div>
        <div>_.sortBy(users,'age'): {{ _.sortBy(users,'age') }}</div>
        <div>_.orderBy(users, ['user', 'age'], ['desc', 'desc']): {{ _.orderBy(users, ['user', 'age'], ['desc', 'desc']) }}</div>
        <div class="title">7.cancat数组连接，uniq数组去重，union合并两个数组去重</div>
        <div>_.concat([1], 2, [3], [[4]]): {{ _.concat([1], 2, [3], [[4]]) }}</div>
        <div>_.uniq([1,1,3]): {{ _.uniq([1,1,3]) }}</div>
        <div>union可以接受多个参数，将多个参数合并为一个数组元素。</div>
        <div>_.union([1,1,3],[4,4,3]): {{ _.union([1,1,3],[4,4,3]) }}</div>
        <div>其他</div>
        <div class="title">节流：创建一个节流函数，在 wait 秒内最多执行 func 一次的函数。</div>
        <div>_.throttle(func, [wait=0], [options=])</div>
        <div class="title">防抖:创建一个 debounced（防抖动）函数，该函数会从上一次被调用后，延迟 wait 毫秒后调用 func 方法, 如果在这 wait 秒内又被触发，则重新计时</div>
        <div>_.debounce(func, [wait=0], [options=])</div>
    </div>
</template>

<script setup>
    import lodash from 'lodash'
    const _ = lodash
    // import isBetween from 'dayjs/plugin/isBetween'	// 引入相关插件
    // dayjs.extend(isBetween)
    lodash.compact(['1','2',' ',0])

    // let arr = [{name:'123', age: 12}]
    var arrs = [{ 'n': 4 }, { 'n': 2 }, { 'n': 8 }, { 'n': 6 }];
    
    var users = [
        { 'user': 'barney', 'age': 36, 'active': true },
        { 'user': 'fred',   'age': 40, 'active': false },
        { 'user': 'anty',   'age': 18, 'active': false },
        { 'user': 'city',   'age': 18, 'active': false },
        { 'user': 'city',   'age': 20, 'active': false }
    ];
    const filterResult = _.filter(users, function(o) { return !o.active; });
    console.log('filterResult', filterResult)
    function Foo() {
        this.a = 1;
        this.b = 2;
    }
    Foo.prototype.c = 3;
    const keys = _.keys(new Foo);
    console.log('keys', keys)
    var users = {
    'barney':  { 'age': 36, 'active': true },
    'fred':    { 'age': 40, 'active': false },
    'pebbles': { 'age': 1,  'active': true }
    };
    const key2 = _.findKey(users, function(o) { return o.age < 40; });
    console.log('key2', key2)
</script>

<style>
.title{
    font-weight: bold;
}
</style>